<template>
  <div>
    <div class="imgcan" @click="clickhandler(value)">
      <img class="showimg" :src="'../../../static/img/' + value.bannerIcon"/>
      <div v-if="value.bannerName === '现金情况'">点击图片查看详情</div>
    </div>
    <div class="text-center">
      <span v-if="switchState" class="bignum">{{value.bannerItems[2].value}}</span>
      <span v-if="!switchState" class="bigSart">******</span>
      <i class="iconfont eyesize" v-bind:class="{'icon-data-hide' : switchState, 'icon-data-show' : !switchState}" @click.stop="moneyswitch"></i>
    </div>
    <div class="text-center bignumsub">
      {{value.bannerItems[2].name}}（元）
    </div>
    <dc-row type="flex" justify="end" class="mt60">
      <dc-col span="12" class="iconcan">
        <div class="text-center leftnum plus">{{switchState ? value.bannerItems[1].value : '****'}}</div>
        <div class="text-center numsub">{{value.bannerItems[1].name}}（元）</div>
      </dc-col>
      <dc-col span="12" class="iconcan">
        <div class="text-center rightnum minus">{{switchState ? value.bannerItems[0].value : '****'}}</div>
        <div class="text-center numsub">{{value.bannerItems[0].name}}（元）</div>
      </dc-col>
    </dc-row>
  </div>
</template>
<script>
  /**
   * @namespace  components/home/carousel
   * @author ashen
   * @description 首页滑动卡片
   */
  import {col, row} from '@/components/Flex';
  export default {
    components: {
      'dc-col': col,
      'dc-row': row
    },
    props: {
      'dizhi': {},
      'value': {}
    },
    created () {
      let switchState = JSON.parse(localStorage.getItem('switchState')) || {};
      switchState = (switchState[this.dizhi] === undefined ? true : switchState[this.dizhi] === true);
      this.switchState = switchState;
    },
    data () {
      return {
        'switchState': ''
      };
    },
    methods: {
      moneyswitch () {
        let switchState = JSON.parse(localStorage.getItem('switchState')) || {};
        this.switchState = !this.switchState;
        switchState[this.dizhi] = this.switchState;
        localStorage.setItem('switchState', JSON.stringify(switchState));
      },
      clickhandler (data) {
        if (data.bannerUrl) {
          this.$router.push({path: '/' + data.bannerUrl});
        }
      }
    }
  };
</script>
<style lang="scss">
  @import "../../../assets/css/variable";
  .bignum {
    font-weight: bold;
    font-size: px2rem(78px);
    color: #7b78f2;
  }

  .bigSart {
    font-weight: bold;
    font-size: px2rem(78px);
    color: #7b78f2;
    vertical-align: middle
  }

  .eyesize {
    font-size: px2rem(60px);
    color: #7b78f2;
    margin-right: -19px;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      top: -10px;
      right: -10px;
      bottom: -10px;
      left: -10px;
    }
  }

  .bignumsub {
    font-size: px2rem(40px);
    padding-top: px2rem(15px);
  }

  .leftnum {
    font-size: px2rem(40px);
    font-weight: bold;
  }

  .rightnum {
    font-size: px2rem(40px);
    font-weight: bold;
  }

  .downicon {
    color: #b0b0b0;
    font-size: px2rem(12px);
  }

  .minus {
    color: #f74436;
  }

  .plus {
    color: #33c559;
  }

  .numsub {
    color: #b0b0b0;
  }
</style>
